<template>
    <el-row :gutter="10" class="top-view">
        <el-col :span="6">
            <TodaySale />
        </el-col>
        <el-col :span="6">
            <TodayOrders />
        </el-col>
        <el-col :span="6">
            <TodayUsers />
        </el-col>
        <el-col :span="6">
            <TotalUsers />
        </el-col>
    </el-row>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "Top",
});
</script>

<script setup lang="ts">
//引入封装公共组件后的组件
import TodaySale from "./components/TodaySale.vue";
import TodayOrders from "./components/TodayOrders.vue";
import TodayUsers from "./components/TodayUsers.vue";
import TotalUsers from "./components/TotalUsers.vue";
</script>

<style scoped lang="scss">
.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
</style>
<style lang="scss">
.top-view {
    .emphasis {
        margin: 0 5px;
        font-size: 12px;
        font-weight: 700;
    }

    .increment {
        width: 0;
        height: 0;
        border-width: 4px;
        border-color: transparent transparent green transparent;
        border-style: solid;
    }

    .decrement {
        width: 0;
        height: 0;
        border-width: 4px;
        border-color: red transparent transparent transparent;
        border-style: solid;
    }
}
    </style>
    